<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>折线图</title>
    <link rel="stylesheet" type="text/css"
          href="/static/assets/css/layui.css">
    <script src="/static/assets/echarts.min.js"></script>
    <script src="/static/assets/jquery.min.js"></script>
</head>
<body>
<div>
    <button type="button" class="layui-btn" id="showBar">查看流量柱状统计图</button>
    <button type="button" class="layui-btn" id="showLine">查看流量折线统计图</button>
    <button type="button" class="layui-btn" id="showIncomeBar">查看收入柱状统计图</button>
    <button type="button" class="layui-btn" id="showIncome">查看收入折线情况</button>
    <input style="width: 200px" type="text" class="layui-input" id="test1">
    <div style="height: 500px;width: 1000px" class="" id="lineChart"></div>
</div>
<script src="/static/assets/layui.all.js"></script>
<script>
    $(function () {

        layui.use('laydate', function () {
            var laydate = layui.laydate;

            var type = ''

            var index = 0

            //折线图
            var echartsA = echarts.init(document.getElementById('lineChart'));

            echartsA.setOption({

                title: {
                    text: '停车场出入情况'
                },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['次数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: true,
                    data: []
                }],

                yAxis: [{
                    // type: 'value'
                }],
                series: [{
                    name: '次数',
                    type: 'line',
                    data: [],
                    itemStyle: {
                        normal: {
                            color: '#59aea2'
                        },
                        emphasis: {}
                    }
                }
                ]
            });

            echartsA.showLoading();

            function getData(year, type) {
                var dates = [];
                var count = [];
                $.ajax({
                    type: 'post',
                    async: true,
                    headers: {'Content-Type': 'application/json;charset=utf8'},
                    url: '/accessInfo/selectNumByYear',
                    data: JSON.stringify({
                        year: year
                    }),
                    dataType: 'json',
                    success: function (result) {
                        console.log(result)
                        var accessNums = result.data.accessNums
                        if (result) {
                            for (var i = 0; i < accessNums.length; i++) {
                                dates.push(accessNums[i].monthNum + '月');
                                count.push(accessNums[i].accessCount);
                            }
                            echartsA.hideLoading();
                            echartsA.setOption({
                                title: {
                                    text: '停车场出入情况'
                                },
                                xAxis: {
                                    boundaryGap: true,
                                    data: dates
                                },
                                series: [{
                                    name: '停车场流量',
                                    type: type,
                                    data: count,
                                    itemStyle: {
                                        normal: {
                                            color: '#59aea2'
                                        },
                                        emphasis: {}
                                    }
                                }
                                ]
                            });
                        }
                    },
                    error: function (errorMsg) {
                        //请求失败时执行该函数
                        alert("图表请求数据失败!");
                        echartsA.hideLoading();
                    }
                });
            }

            function getIncomes(year, type) {
                var dates = [];
                var count = [];
                $.ajax({
                    type: 'post',
                    async: true,
                    headers: {'Content-Type': 'application/json;charset=utf8'},
                    url: '/accessInfo/selectIncomeByYear',
                    data: JSON.stringify({
                        year: year
                    }),
                    dataType: 'json',
                    success: function (result) {
                        console.log(result)
                        var incomes = result.data.incomes
                        if (result) {
                            for (var i = 0; i < incomes.length; i++) {
                                dates.push(incomes[i].months + '月');
                                count.push(incomes[i].income);
                            }
                            echartsA.hideLoading();
                            echartsA.setOption({
                                title: {
                                    text: '停车场收入情况'
                                },
                                xAxis: {
                                    boundaryGap: true,
                                    data: dates
                                },
                                series: [{
                                    name: '元',
                                    type: type,
                                    data: count,
                                    itemStyle: {
                                        normal: {
                                            color: '#59aea2'
                                        },
                                        emphasis: {}
                                    }
                                }
                                ]
                            });
                        }
                    },
                    error: function (errorMsg) {
                        //请求失败时执行该函数
                        alert("图表请求数据失败!");
                        echartsA.hideLoading();
                    }
                });
            }

            getData(2020, type)

            $('#showIncome').on('click', function () {
                type = 'line'
                getIncomes(2020, type)
                index = 2
            })

            $('#showBar').on('click', function () {
                type = 'bar'
                getData(2020, type)
                index = 1
            })

            $('#showLine').on('click', function () {
                type = 'line'
                getData(2020, type)
                index = 0
            })

            $('#showIncomeBar').on('click', function () {
                type = 'bar'
                getIncomes(2020, type)
                index = 3
            })

            //执行一个laydate实例
            //年选择器
            laydate.render({
                elem: '#test1'
                , type: 'year'
                , value: '2020'
                , done: function (value) {
                    switch (index) {
                        case 0:
                            getData(value, type)
                            break
                        case 1:
                            getData(value, type)
                            break
                        case 2:
                            getIncomes(value, type)
                            break
                        case 3:
                            getIncomes(value, type)
                            break
                    }
                    // getData(value)
                }
            });

        })
    })
</script>
</body>
</html>